﻿@model HomeCareLibrary.Models.SponsorInputs345xModel

@{
    ViewBag.Title = "Welcome Image";
}  
 <style>


                .progress-bar {
    background-image: linear-gradient(to bottom, #428BCA 0px, #3071A9 100%);
    background-repeat: repeat-x;
}
 .sr-only {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
 .progress-bar {
    background-color: #428BCA;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    height: 100%;
    text-align: center;
    transition: width 0.6s ease 0s;
    width: 0;
}
 .progress {
    background-image: linear-gradient(to bottom, #EBEBEB 0px, #F5F5F5 100%);
    background-repeat: repeat-x;
}
.progress {
    background-color: #F5F5F5;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    height: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: hidden;
}
            </style>
    <div class="col-lg-9 col-sm-9 right_part">
          <div class="additional-web-pages welcome-image-Page personalization-page">
            
               

               @*Header not show in case of Android App. *@
             @if (Session[HomeCareLibrary.Constants.SessionConstants.MODE] == null || Session[HomeCareLibrary.Constants.SessionConstants.MODE].ToString() == HomeCareLibrary.Constants.ApplicationModeConstants.IPHONE_APP || Session[HomeCareLibrary.Constants.SessionConstants.MODE].ToString() == HomeCareLibrary.Constants.ApplicationModeConstants.IPAD_APP)
             {
              <div class="Android-tittleMOB title clearfix">
              <h1>Welcome Image</h1>
              <div class="top-btn-per clearfix">
                <div id="back-button" class="back-button"><a href="javascript:void(0);"><img class="back-btn" alt="back-btn" src="@Url.Content("~/images/personalization-images/back-btn.png")"> 
                         <div class="back-mob-btn"><span class="glyphicon glyphicon-chevron-left"></span> Back</div>
                        </a></div>
               </div>
            </div>
             }
              
             @{
                  var sessionValue = "";
                  if (Session[HomeCareLibrary.Constants.SessionConstants.MODE]!=null)
                  {
                      sessionValue = Session[HomeCareLibrary.Constants.SessionConstants.MODE].ToString();
                  }
                  else{
                      sessionValue = "";
                  }
                      <input type="hidden" value="@sessionValue" id="hdnSessionValue" />
              }
            

              @{var androidContent = string.Empty;
                if (Session[HomeCareLibrary.Constants.SessionConstants.MODE] == null || Session[HomeCareLibrary.Constants.SessionConstants.MODE].ToString() == HomeCareLibrary.Constants.ApplicationModeConstants.IPHONE_APP || Session[HomeCareLibrary.Constants.SessionConstants.MODE].ToString() == HomeCareLibrary.Constants.ApplicationModeConstants.IPAD_APP)
                 {
                     androidContent = "class= personalization-content";
                 }
                  else
                  {
                      androidContent = "";
                  }
                     }

            <div class="main-content">
              <div @androidContent>
                <div class="personalization-bg">
                  <div class="personalization-inn">
                  <div class="personalization-data welcome-image-additional">
                 <br />
                  <p class="top-data">You can customize your Welcome screen by adding favorite picture <br />
of your home, your family, your favorite spot relax, etc.
                  </p><br />
                  <div class="Dwelling-part">
                       <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                        <span class="sr-only">0% complete</span>
                    </div>
                </div>
                                    <div class="form-per">
                                     <p>
                                         @if (ViewBag.getWelcomeImage != null && ViewBag.getWelcomeImage != string.Empty)
                                         {
                                         <img id="imgLogoWelcome" src="@Url.Content("~/UserWelcomeImage/"+ ViewBag.getWelcomeImage)" alt="" />
                                         }
                                         else
                                         {
                                         <img id="imgLogoWelcome" src="@Url.Content("~/images/mtt-images/welcome-wizard-img.png")" alt="" />
                                         }
                                         
                                     </p>
                                     <br />
                                        <div class="button WelcomeImagePopup">
                              <button type="submit" class="btn-per" data-toggle="modal" data-target="#WelcomeImageModal">Change picture</button>                                           
                                            <!-- Sponsor Details -->                              
                                           
                              <!-- Modal -->
<div  class="modal fade WelcomeImageModal" id="WelcomeImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-body">
       <div class="WelcomePopUpImage"><img src="@Url.Content("~/images/welcome-img/FormCameraImg.png")" alt="" /></div>
       <ul class="list-unstyled WelcomePopUpUL clearfix">
       <li><a href="javascript:void(0);"><span><img src="@Url.Content("~/images/welcome-img/FormCameraImg.png")" alt="" /></span>From Camera</a></li>
           @*<li>
                  <input id="fileupload1" style="display:none;"  type="file" name="files[]" multiple>

           </li>*@
       <li>@*<a id="btnFormLibraryImg" href="javascript:void(0);"><span><img src="@Url.Content("~/images/welcome-img/FormLibraryImg.png")" alt="" /></span>From Library</a>*@
          <a style="position: relative; overflow: hidden; direction: ltr;"><span><img src="@Url.Content("~/images/welcome-img/FormLibraryImg.png")" alt="" /></span>From Library<input id="fileupload1"  style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;" type="file" name="files[]" multiple></a>

       </li>
       <li><a data-toggle="modal" data-target=".bs-modal-sm" href="javascript:void(0);"><span><img src="@Url.Content("~/images/welcome-img/DeleteImg.png")" alt="" /></span>Delete</a></li>
       </ul>
      </div>
      <div class="modal-footer">
      <button type="button" id="btnOK" data-dismiss="modal" class="btn btn-default">Ok</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


                            </div>
                                        <br />

                                         <div  aria-hidden="true" aria-labelledby="mySmallModalLabel" role="dialog" tabindex="-1" class="modal fade bs-modal-sm" style="display: none;">
                                            <div class="modal-dialog modal-sm">
                                                <div class="modal-content">

                                                   
                                                    <div class="modal-body">
                                                        Are you sure you want to delete Welcome Image?
                                                    </div>

                                                    <div class="modal-footer">
                                                        <button data-dismiss="modal" style="float:right;" class="btn btn-default" id="btnDeleteWelcomeImage" type="button">Ok</button>
                                                        <button data-dismiss="modal" style="float:left;" class="btn btn-default" type="button">Cancel</button>
                                                    </div>
                                                </div>
                                                <!-- /.modal-content -->
                                            </div>
                                            <!-- /.modal-dialog -->
                                        </div>                                      
                                        <table>                                            
                                            <tr style="padding-top:25px; text-align:center;">
                                                <td>
                                                    @if (Model.web_notepad_line1 != string.Empty)
                                                    {
                                                        <img id="sponLogo" src="@Url.Content("~/UserWelcomeImage/"+ Model.web_notepad_line1)" alt="" />
                                                    }
                                                    else
                                                    {
                                                        <img id="sponLogo" src="@Url.Content("~/images/additional-pages-images/img-change.png")" alt="" />
                                                    }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: center;">
                                                    @Html.DisplayFor(m => m.web_notepad_line2)
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight:bold; text-align:center;">
                                                    @Html.DisplayFor(m => m.web_notepad_line3)
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold; text-align: center;">
                                                    @Html.DisplayFor(m => m.web_notepad_line4)
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: center;">
                                                    @Html.DisplayFor(m => m.web_notepad_line5)
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: center;">
                                                    @Html.DisplayFor(m => m.web_notepad_line6)
                                                </td>
                                            </tr>
                                        </table>

                                          <br />
                       Session Ids with values:
                      @if (ViewBag.sessionIds != string.Empty)
                      {
                      @ViewBag.sessionIds
                      } <br />
                     
                   

                    <br />
                     <span style="margin-left:10px;">
                 Session:
                    @if (ViewBag.getSession != string.Empty)
                    {
                      @ViewBag.getSession
                    }
                      </span>
             <br /> <br />

            <span style="margin-left:10px;">
                  JSON:
                     @if (ViewBag.JsonString != string.Empty)
                     {
                      @ViewBag.JsonString
                     }</span>

              <br /><br />
                         <span>
                  Request Content-Type:
                    @if (ViewBag.ContentType != string.Empty)
                    {
                      @ViewBag.ContentType
                    }
                      </span>

                      <br /><br />
                         <span>
                  Request URL:
                    @if (ViewBag.Url != string.Empty)
                    {
                      @ViewBag.Url
                    }
                      </span>
                                     
                                    </div>
                                    
                                  </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>

@section script { 
    <script src="@Url.Content("~/js/iPhone/iPhone.js")"></script>
     
<script type="text/javascript">
   
    var version = "1";

    $(function () {
        $('.progress').hide();
        $.ajaxSetup({ cache: false });


        $('#fileupload1').fileupload({
            dataType: 'json',
            cache: false,
            url: '/Admin/UploadFiles',
            autoUpload: false,
            
            add: function (e, data) {
                $("#btnOK").click(function () {

                    data.submit();
                })
            },
            formData: {},
            done: function (e, data) {

                version = parseInt(version) + 1;
                $("#imgLogoWelcome").attr("src", "");
               
                $('#imgLogoWelcome').attr('src', "../UserWelcomeImage/" + data.result.name + "?v="+version);
                
                $('#WelcomeImageModal').modal('hide');
                $('.progress').hide();
                //try
                //{
                //    $('#fileupload1').fileupload('destroy');
                //}
                //catch (err)
                //{}
        }
        }).on('fileuploadprogressall', function (e, data) {
            $('.progress').show();
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
      });


    });


  


     $_blockDelete = false;
        $('#btnDefaultImageRestore').die('click').live('click', function () {
            var rconfirm = confirm('Are you sure?');
            if (rconfirm) {
                $('#form0').submit();
            }
        });


        

        $("#btnDeleteWelcomeImage").live("click", function (e) {
                $.ajax({
                type: "POST",
                url: "/admin/DeleteWelcomeImage",
                data: {},
                success: function (data) {
                    $("#WelcomeImageModal").modal("hide");

                    $("#imgLogoWelcome").attr("src", "@Url.Content("~/images/additional-pages-images/img-change.png")");

                    },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');
                   
                }
               });
           });


        </script>

   
    }

